import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
/* 关于vue-router知识点：
createRouter：
创建一个可以被 Vue 应用程序使用的路由实例。
查看 RouterOptions 中的所有可以传递的属性列表。
 
createWebHashHistory：
创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，
或当配置服务器不能处理任意 URL 时这非常有用。注意：如果 SEO 对你很重要，
你应该使用 createWebHistory。
example：
// at https://example.com/folder
createWebHashHistory() // 给出的网址为 `https://example.com/folder#`
createWebHashHistory('/folder/') // 给出的网址为 `https://example.com/folder/#`
// 如果在 base 中提供了 `#`，则它不会被 `createWebHashHistory` 添加
createWebHashHistory('/folder/#/app/') // 给出的网址为 `https://example.com/folder/#/app/`
// 你应该避免这样做，因为它会更改原始 url 并打断正在复制的 url
createWebHashHistory('/other-folder/') // 给出的网址为 `https://example.com/other-folder/#`
// at file:///usr/etc/folder/index.html
// 对于没有 `host` 的位置，base被忽略
createWebHashHistory('/iAmIgnored') // 给出的网址为 `file:///usr/etc/folder/index.html#`
 
createWebHistory() // 没有 base，应用托管在域名 `https://example.com` 的根目录下。
createWebHistory('/folder/') // 给出的网址为 `https://example.com/folder/`
 
 
RouteRecordRaw：
当用户通过 routes option 或者 router.addRoute() 来添加路由时，可以得到路由记录。 有三种不同的路由记录:
一、单一视图记录：有一个 component 配置
二、多视图记录 (命名视图) ：有一个 components 配置
三、重定向记录：没有 component 或 components 配置，因为重定向记录永远不会到达。
 
path#
类型：string
详细内容：
记录的路径。应该以 / 开头，除非该记录是另一条记录的子记录。可以定义参数：/users/:id 匹配 /users/1 
以及 /users/posva。
 
redirect#
类型：RouteLocationRaw | (to: RouteLocationNormalized) => RouteLocationRaw (可选)
详细内容：
如果路由是直接匹配的，那么重定向到哪里呢。重定向发生在所有导航守卫之前，
并以新的目标位置触发一个新的导航。也可以是一个接收目标路由地址并返回我们应该重定向到的位置的函数。
 
children#
类型：RouteRecordRaw 数组 (可选)
详细内容：
当前记录的嵌套路由。
 
alias#
类型：string | string[] (可选)
详细内容：
路由的别名。允许定义类似记录副本的额外路由。这使得路由可以简写为像这种 /users/:id 和 /u/:id。 所有的 alias 和 path 值必须共享相同的参数。
 
name#
类型：string | symbol (可选)
详细内容：
路由记录独一无二的名称。
 
beforeEnter#
类型：NavigationGuard | NavigationGuard[] (可选)
详细内容：
在进入特定于此记录的守卫之前。注意如果记录有重定向属性，则 beforeEnter 无效。
 
props#
类型：boolean | Record<string, any> | (to: RouteLocationNormalized) => Record<string, any> (可选)
详细内容：
允许将参数作为 props 传递给由 router-view 渲染的组件。当传递给一个多视图记录时，
它应该是一个与组件具有相同键的对象，或者是一个应用于每个组件的布尔值。
 
meta#
类型：RouteMeta (可选)
详细内容：
在记录上附加自定义数据。
 
 */
import HomeView from '../views/HomeView.vue'
import {getRouter} from '../http/api';
/* getRouter接口传路由的数据 */
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    // redirect:"order"
    /* 路由守卫之前的重定向指定 */
    // children:[
    //   {
    //     path: 'order',
    //     name: 'order',
    //     meta:{
    //       isShow:true,
    //       title:"订单列表"
    //     },
    //     component: () => import(/* webpackChunkName: "order" */ '../views/OrderView.vue')
    //   },
    //   {
    //     path: 'userList',
    //     name: 'userList',
    //     meta:{
    //       isShow:true,
    //       title:"用户列表"
 
    //     },
    //     component: () => import(/* webpackChunkName: "userList" */ '../views/UserView.vue')
    //   },
    //   {
    //     path: 'roleList',
    //     name: 'roleList',
    //     meta:{
    //       isShow:true,
    //       title:"角色列表"
 
    //     },
    //     component: () => import(/* webpackChunkName: "userList" */ '../views/RoleView.vue')
    //   },
    //   {
    //     path: 'authority',
    //     name: 'authority',
    //     meta:{
    //       isShow:false,
    //       title:"权限列表" 
 
    //     },
    //     component: () => import(/* webpackChunkName: "userList" */ '../views/AuthorityView.vue')
    //   }
    // ]
  },
//   {
//     path: '/about',
//     name: 'about',
//     // route level code-splitting
//     // this generates a separate chunk (about.[hash].js) for this route
//     // which is lazy-loaded when the route is visited.
//     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
//   },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '../views/LoginView.vue')
  },
//   {
//     path: '/testView',
//     name: 'testView',
//     // route level code-splitting
//     // this generates a separate chunk (about.[hash].js) for this route
//     // which is lazy-loaded when the route is visited.
//     component: () => import(/* webpackChunkName: "TestView" */ '../views/TestView.vue')
//   }
  /* 一级页面？能不能有动态路由？？？ */
]
 
 
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
/* router和route的区别？
1. router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，
这个对象中是一个全局的对象，包含了所有的路由包含了许多关键的对象和属性。例如history对象。
$router.push({path:’/path’}); 本质是向history栈中添加一个路由，
在我们看来是 切换路由，但本质是在添加一个history记录。
$router.replace({path:’/path’}); 替换路由，没有历史记录
 
2. route是一个跳转的路由对象，每一个路由都会有一个route对象，
是一个局部的对象，可以获取对应的name,path,params,query等。
$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/index/” 。
$route.params
对象，包含路由中的动态片段和全匹配片段的键值对
$route.query
对象，包含路由中查询参数的键值对。例如，对于 /index?id=1 ，会得到 $route.query.id == 1。
params传参合query传参的区别
params参数在地址栏中不会显示，query会显示
例如：
this.router.push({path:'/customList'，params:{id:6}})
this.router.push({path:'/customList'，query:{id:6}})
params: http://localhost:8080/#/customList
query:http://localhost:8080/#/customList?id=6
 
2.网页刷新后params参数会不存在
$route.router
路由规则所属的路由器（以及其所属的组件）。
$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name
当前路径的名字，如果没有使用具名路径，则名字为空。
$route.path, $route.params, $route.name, $route.query这几个属性很容易理解，主要用于接收路由传递的参数。
 */
/* useRouter与useRoute区别？
useRouter（跳转）, useRoute（获取路由参数）。
 */
/* Router中beforeEach方法：
example：
router.beforeEach((to, from, next) => {
  // to 将要跳转到的路由,
  // from 从哪个路由跳转过来的,
  //next() 不调用此函数将无法正常跳转
})
 
###router下index.js文件
router.beforeEach(async (to, from, next) => {
  const token = localStorage.getItem('token') // 拿到保存在浏览器后端发送来的token **令牌 (通行证)**
  const flag = !!token  // 将token隐试的转换成Boolean值
  const data = await userInfo()  // 这是与后端定义好的 对用户的二次验证 诺返回error === 400 表示你造假登陆
  		// 判断你需要去的路由是否需要登陆验证
  if (to.matched.some((item) => { return item.meta.login })) { 
    if (flag) {
      //
      if (data.error === 400) {
        next('/login') //不合法,重新登陆 并且 强制跳转到登陆注册页面
        return;
      }
      // 到了这里肯定是合法了 不然会被 上边if return 结束下面代码的继续执行
      if (to.name == 'login') {
      	// 如果你合法登陆了但还要去登陆页注册页面 那强制让他去首页
        next('/home')
      } else {
      // 只要你不去 登陆 注册页面想去哪去哪
        next()
      }
      return
    }
    if (!flag && to.name === 'login') {
    // 如果你没token 想去 登陆注册 那可以去吧
      next()
      return
    }
    if (!flag && to.name !== 'login') {
    // 你没登陆还不去注册还想去只能登陆才能看的页面 那想的美强制跳到根页
      next('/')
    }
  } else {
  // 只要你不去需要登陆才能去的页面 想去哪去哪
    next()
    return
  }
*/
// 路由拦截
router.beforeEach(async (to)=>{
  // 如果没有登录，则只能进去登录页面
  const token:string | null = localStorage.getItem('token')
  if(!token && to.path !== "/login"){
    return '/login'
  }else if(to.path!=='/login'&&token){
    if(router.getRoutes().length===3){
      // 动态添加路由
      let routerData:any = await getRouter()
      routerData = routerData.data
 
      routerData.forEach((v:any)=>{
        const routerObj:RouteRecordRaw = {
              path:v.name,
              name:v.name,
              meta:v.meta,
              component: () => import(/* webpackChunkName: "[request]" */ `../views/${v.path}.vue`)
          }
          router.addRoute("home",routerObj)
      })
      router.replace(to.path)
    }
 
  }else if(to.path==='/login'&&token){
    return '/'
  }
})
 
export default router